{include file="common/header" /}
<link rel="stylesheet" href="__LAYUIMINI__/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
<style>
    body {
        background-color: #ffffff;
    }
    .img-item {
        position: relative;
        width: 96px;
        height: 96px;
        border-radius: 6px;
        margin-bottom: 10px;
        margin-right: 10px;
    }
    .img-item img {
        border-radius: 6px;
        width: 100%;
        height: 100%;
    }
    .img-item i {
        font-size: 20px;
        position: absolute;
        top: -10px;
        right: -10px;
    }

</style>
<body>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
  <legend>字段操作</legend>
</fieldset>
<div class="layui-form layuimini-form">
    <div class="layui-form-item">
        <label class="layui-form-label ">类型</label>
        <div class="layui-input-block col-sm-400">
            <select name="type" lay-filter="search_type">
                <option value='' >请选择字段类型</option>
                {volist name="$fieldType" id="vo"}
                <option value="{$key}">{$vo}</option>
                {/volist}
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label ">字段名</label>
        <div class="layui-input-block col-sm-400">
            <input name="field" type="text" class="layui-input" placeholder="请输入字段名,例:title" required="" >
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">别名</label>
        <div class="layui-input-block col-sm-400">
            <input name="name" type="text" class="layui-input" placeholder="请输入别名,例:标题" required="">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label ">字段设置</label>
        <div class="layui-input-block col-sm-400">
            <div id="field_setup" class="col-sm-5">
                                    
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label ">class名称</label>
        <div class="layui-input-block col-sm-400">
            <input name="class" type="text" class="layui-input" placeholder="请输入class名称" >
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label ">必填</label>
        <div class="layui-input-block col-sm-400">
            <input type="radio" name="required" value="1" title="是">
            <input type="radio" name="required" value="0" title="否" checked="">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label ">是否只读</label>
        <div class="layui-input-block col-sm-400">
            <input type="radio" name="readonly" value="1" title="是">
            <input type="radio" name="readonly" value="0" title="否" checked="">
        </div>
        <div class="desc-text"><span> *如果是只读字段，则该字段内容修改无效。</span></div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label ">验证规则</label>
        <div class="layui-input-block col-sm-400">
            <select name="pattern" class="form-control m-b" >
                <option value='' >请选择</option>
                {volist name="pattern" id="vo" }
                    <option value='{$vo.name}' >{$vo.title}</option>
                {/volist}
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label ">字符长度</label>
        <div class="layui-input-block col-sm-400">
            <input name="maxlength" type="number" class="layui-input" placeholder="请输入字符长度" >
        </div>
    </div>
                           
    <div class="layui-form-item">
        <label class="layui-form-label ">错误信息</label>
        <div class="layui-input-block col-sm-400">
            <input name="errormsg" type="text" class="layui-input" placeholder="验证失败错误信息" >
        </div>
    </div>
    
    <div class="layui-form-item">
        <div class="layui-input-block">
            
            <input type="hidden" name="moduleid" value="{$moduleid}">
            <button class="layui-btn" lay-submit lay-filter="saveBtn">确认保存</button>
            <button class="layui-btn layui-btn-primary" onclick="goBack({$moduleid})" >返回</button>
        </div>
    </div>
</div>
<script type="text/javascript">
    
    $(function(){
        var  type = $("#type").val();
        
        /*$.post("{:url('admin/module/field_add')}", { type:type}, function (data) {
            $("#field_setup").html(data);
            
        });*/
    });
</script>
<script>

    layui.use(['form','iconPickerFa','upload','laydate'], function () {
        var form = layui.form,
            iconPickerFa = layui.iconPickerFa,
            layer = layui.layer,
            upload = layui.upload,
            laydate = layui.laydate,
            $ = layui.$;


        window.goBack = function(moduleid){
            window.location.href="{:url(CONTROLLER_NAME.'/fields')}?id="+moduleid;
        }

        
        form.on('select(search_type)', function(data){
            //console.log(data)
            var  type = data.value;
            console.log(type)
            $.ajax({
                url:"{:url('module/field_add_type')}",
                data:{"type":type},
                type:'post',
                //dataType:'json',
                success:function(res){
                    console.log(res)
                    $("#field_setup").html(res);
                    form.render();
                },
                error : function(XMLHttpRequest, textStatus, errorThrown) {
                    layer.msg('网络失败，请刷新页面后重试!',{icon: 2,time: 2000})
                }
            });
        });
        
        //监听提交
        form.on('submit(saveBtn)', function (data) {
            var index = layer.load(1, {
                shade: [0.3,'#000'] //0.1透明度的白色背景
            });
            var data = data.field;
            console.log(data)
            $.ajax({
                url:"{:url('module/field_add')}",
                data:data,
                type:'post',
                dataType:'json',
                success:function(res){
                    // layer.close(index);
                    // console.log(res)
                    // return false
                    if(res.errcode != 1){
                        layer.msg(res.message,{icon: 2,time: 2000},function(){
                            layer.close(index);
                        })
                    }else{
                        layer.msg(res.message,{icon: 1,time: 1000},function () {
                            console.log(res.dyurl);
                            window.location.href = "{:url('module/fields')}?id={$moduleid}";
                        })
                    }
                    layer.close(index);
                },
                error : function(XMLHttpRequest, textStatus, errorThrown) {
                    layer.msg('网络失败，请刷新页面后重试!',{icon: 2,time: 2000})
                }
            });

            return false;
        });

    });
</script>
</body>
</html>